<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="后台bootstrap框架,bootstrap tabe表格">
		<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题">
		<title>角色列表</title>

		<link href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<link href="../../static/css/font-awesome.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css" th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
		<link href="../../static/css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet">
		<link href="../../static/css/plugins/zTree/zTreeStyle.css" th:href="@{/css//plugins/zTree/zTreeStyle.css}" rel="stylesheet">
		<link href="../../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
	</head>

	<body class="gray-bg">
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-9" id="tablepanel" >
					<!--角色列表-->
					<div class="ibox-content padding-s-0">
						<div class="ibox">
							<div class="btn-group hidden-xs" id="roleListTableToolbar" role="group">
								<button  type="button" title="添加角色" class="btn btn-outline btn-default" onclick="addRoleModal('add');">
		            	<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
		        	</button>
								<button type="button"  class="btn btn-outline btn-default" title="修改角色" onclick="addRoleModal('edit');">
									<i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
								</button>
								<button type="button" title="删除角色" class="btn btn-outline btn-default" onclick="delRole();">
		        	<i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
		    		</button>
							</div>
							<table id="roleListTable" ></table>
						</div>
					</div>
				</div>
				
				<div class="animated col-lg-3" id="zTreepanel" style="padding-left: 0px;">
					<!--授权树形列表-->
					<div class="panel">
						<div class="btn-group">
							<button type="button" class="btn btn-primary" onclick="saveModule();"><i class="glyphicon glyphicon-ok"></i>保存</button>
							<button type="button" class="btn btn-info" onclick="refreshzTree();">
								<i class="glyphicon glyphicon-refresh"></i>刷新</button>
							<h3 id="moduleroleLable" style=" float: left;margin: 5px;"></h3>
						</div>
						<div class="panel-body">
							<div class="zTreeDemoBackground left">
								<ul id="treeDemo" class="ztree"></ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 模态框（Modal） -->
		<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							添加
						</h4>
					</div>
					<div class="modal-body">
						<form id="eidtRoleForm" class="form-horizontal" role="form">
							<input  id="oldrcode" name="oldrcode" type="hidden">
							<div class="form-group has-error">
								<label for="rcode" class="col-sm-2 control-label">角色编号</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="rcode" name="rcode" placeholder="请输入角色编号">
								</div>
							</div>
							<div class="form-group has-error">
								<label for="rname" class="col-sm-2 control-label">角色名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="rname" name="rname" placeholder="请输角色名称">
								</div>
							</div>
							<div class="form-group">
								<label  class="col-sm-2 control-label">启用状态</label>
								<div class="col-sm-10">
									<label class="radio-inline"><input type="radio" name="flag"  value="1" checked> 启动</label>
									<label class="radio-inline"><input type="radio" name="flag"  value="0"> 禁用</label>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" onclick="submitFun();">提交</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	<!--	</div>-->

		<!-- 全局js -->
		<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
		<script src="../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
		<script src="../../static/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
		<!-- 自定义js -->
		<script src="../../static/js/content.js" th:src="@{/js/content.js}"></script>

		<!-- Bootstrap table -->
		<script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js" th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
		<script src="../../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js" th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
		<script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
		<script src="../../static/js/plugins/zTree/jquery.ztree.core.js" th:src="@{/js/plugins/zTree/jquery.ztree.core.js}"></script>
		<script src="../../static/js/plugins/zTree/jquery.ztree.excheck.min.js" th:src="@{/js/plugins/zTree/jquery.ztree.excheck.min.js}"></script>
		<!-- Peity -->
		<script type="text/javascript">
			var htmlrcode;
			$(function() {
				$('#roleListTable').bootstrapTable({
					//url: "../../static/js/demo/bootstrap_table_test.json",
					url: "/role/selectRoles",					//数据源
          			cache: false,
					height: 790,                  	//表格高度
					search: true,                 	//是否显示搜索框
					searchAlign: "left",			//指定搜索框水平方向位置
					trimOnSearch: true,      	//搜索内容是否自动去除前后空格
					searchOnEnterKey: true,	//设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
					icons: {
						refresh: 'glyphicon-repeat',
						columns: 'glyphicon-list',
						export: 'glyphicon-export'
					},
					singleSelect: true,
					clickToSelect: true,
				  	iconSize: 'outline',
					pagination: true,             			//显示分页栏
					showRefresh: true,        		 //显示刷新按钮
					showColumns: true,         		//是否显示内容列下拉框
					sortName: "rname",				//定义排序字段
					sortOrder: "asc",           		//定义排序方式，'asc' 或者 'desc'
					silentSort: false,          		 	//设置为 false 将在点击分页按钮时，自动记住排序项
					maintainSelected: true,  		//设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
					toolbar: '#roleListTableToolbar',          //工具栏id
					sidePagination: "server",                               //设置在哪里进行分页，可选值为 'client' 或者 'server'，默认'client'
					pageNumber: 1,                                             //如果设置了分页，首页页码
					pageSize: 20,												//每页每页显示行数
					pageList: [20, 50, 100,200,'All'],					//设置可供选择的页面数据条数,数据行数大于20小于50时只会显示20，50两项，其他同理
					showFullscreen: true,                                    //是否显示全屏按钮
					responseHandler: function(data) {                  //如果后台返回的数据格式与bootstrapTable的数据格式不同在这里调整
						return {
							"page": data.pages,
							"total": data.total,
							"rows": data.list
						};
					},
        			uniqueId: "rcode",
					columns: [
						{field: 'checkStatus',checkbox: true},  
						{field:'rcode',title:'角色编码'},
						{field:'rname',title:'角色名称'},
                        {field:'flag',title:'状态'}
					]
				});
				//定义右边授权面板的高度
				$("#zTreepanel").css("height",$("#tablepanel").height());

                $("#rcode").blur(function(){
                    testinputnull($(this));
                });
                $("#rname").blur(function(){
                    testinputnull($(this));
                });
                $('#roleListTable').on("click-row.bs.table",function (row, $element) {
                    htmlrcode=$element.rcode;
                    initzTreeData(htmlrcode);
					$("#moduleroleLable").text(htmlrcode);
                });
			});
            function testinputnull(obj){
                var text=obj.val().trim();
                if(text==''){
                    obj.parents(".form-group").addClass("has-error");
                }else{
                    obj.parents(".form-group").removeClass("has-error");
                }
            }

			//打开添加弹层
			function addRoleModal(event){
				document.getElementById("eidtRoleForm").reset();
				if(event=="add"){
        			$("#myModalLabel").text("添加");
				}else{
					var select = $('#roleListTable').bootstrapTable('getSelections');
					if(select.length==0){
						layer.alert("请选择要编辑的行！",{icon: 3});return;
					}
					$("#eidtRoleForm").populateForm(select[0]);
					$("#myModalLabel").text("编辑");
					$(".form-group").removeClass("has-error");
					$("#oldrcode").val(select[0].rcode);
				}
				$('#editModal').modal('show');
			}
			//TODO 修改角色编码，rcode取隐藏域的原值
			//编辑提交
            function submitFun(){
                if($(".form-group").hasClass("has-error")){
                    $("[class=has-error]").find("input").eq(0).focus();
				}else{
                    var url="/role/addRole";
                    if($("#myModalLabel").text()=="编辑"){
                        var url="/role/editRole";
					}
                    $.ajax({
                        type: "POST",dataType: "JSON",
                        url:url,
                        data:$('#eidtRoleForm').serialize(),
                        async : false,
                        success: function(data){
                            if(data.code==200){
                                layer.msg("添加成功",{icon:6,time:800});
                                $("#editModal").modal("hide");
                                $('#roleListTable').bootstrapTable('refresh');
							}else{
                                layer.msg(data.msg,{icon:5,time:800});
							}
                        }
                    });
				}
			}

			//加载树
			function initzTreeData(rcode){
				//chkboxType Y被勾选事件，关联父p关联子s,都关联就是ps;N取消勾选事件，关联父p关联子s,都关联就是ps
				$.ajax({
					type: "POST",dataType: "JSON",
					url:"/module/getzTreeModule",
					data: {rcode:rcode},
					async : false,
					success: function(data){
						$.fn.zTree.init($("#treeDemo"),  {
							check: {enable: true,chkboxType:{ "Y":"p", "N":"s"}},
							data: {simpleData: {enable: true}}
						}, data);
					}
				});
                $("#zTreepanel").addClass("fadeInRight");
                setTimeout(function(){
                    $('#zTreepanel').removeClass("fadeInRight");
                },1000);
			}

            //刷新权限信息
            function refreshzTree(){
			    if(htmlrcode==undefined)return;
                initzTreeData(htmlrcode);
            }

			//保存权限信息
			function saveModule(){
				var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
				var nodes = treeObj.getCheckedNodes(true);
				var rcode = htmlrcode;
				var param=[];
				if(nodes.length>0){
                    for(var i=0;i<nodes.length;i++){
                        param.push({rcode:rcode,mcode:nodes[i].id});
                    }
				}
                $.ajax({
                    type: "POST",dataType: "JSON",
                    url:"/role/editRoleMdoules",
                    data: {moduleList:JSON.stringify(param),rcode:rcode},
                    async : false,
                    success: function(data){
                        if(data.code==200){
                            layer.msg(data.msg,{icon:6,time:800});
                        }else{
                            layer.msg(data.msg,{icon:5,time:800});
                        }
                    }
                });
			}
			//删除角色
			function delRole() {
                var select = $('#roleListTable').bootstrapTable('getSelections');
                if(select.length==0){
                    layer.alert("请选择要编辑的行！",{icon: 3});return;
                }
                $.ajax({
                    type: "POST",dataType: "JSON",
                    url:"/role/deleteRole",
                    data: {rcode:select[0].rcode},
                    async : false,
                    success: function(data){
                        if(data.code==200){
                            layer.msg(data.msg,{icon:6,time:800});
                            $('#roleListTable').bootstrapTable('refresh');
                        }else{
                            layer.msg(data.msg,{icon:5,time:800});
                        }
                    }
                });
            }
		</script>
	</body>

</html>